<template>
    <div class="sub-filter" v-if="filterData && !filterLoading">
     <div class="item" >
       <div class="head">品牌：</div>
       <div class="body">
         <a @click="changeBrand(brand.id)" :class="{active:filterData.selectedBrand===brand.id}" href="javascript:;" v-for="brand in filterData.brands" :key="brand.id">{{brand.name}}</a>
       </div>
     </div>
      <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
       <div class="head">{{p.name}}:</div>
       <div class="body"> 
         <a @click="changeProp(p,g.id)"  :class="{active:p.selectedProp===g.id}" href="javascript:;" 
         v-for="g in p.properties" :key="g.id" >{{g.name}}</a>
       </div>
     </div>
    </div>
    <div v-else class="sub-filter">
        <XtxSkeleton class="item" width="800px" height="40px"  />
        <XtxSkeleton class="item" width="800px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
  </div>
</template>

<script>
import {findSubCategoryFilter} from '@/api/category'
import {ref,watch} from 'vue'
import {useRoute} from 'vue-router'
export default {
name:'SubFilter',
setup(props,{emit}){
    const filterData=ref(null) //过滤重组后的数组
    const route=useRoute()
    let filterLoading=ref(false) //用来判断

    /**
     * 思路
     * 获取数据 需要对原数据进行重组
     * 1.都有选中功能，默认全部选中
     * 2.因为类目ID在路由中获取，需要watch来监听ID的变化
     * 3.当从二级类目到一级类目时 也会拿到ID，所以只能加载二级类目的ID
     * 
     */
    //监听二级类目ID的变化
    watch(()=>route.params.id,(newVal)=>{
        if(newVal && route.path === `/category/sub/${newVal}`){
             filterLoading.value=true
            newVal && findSubCategoryFilter(route.params.id).then(({result})=>{
                // console.log('res',result);
                //给品牌加全部
                result.selectedBrand = null
                result.brands.unshift({id:null,name:"全部"})
                result.saleProperties.forEach(item=>{
                    //给筛选区的每一个item加全部
                    item.selectedProp = null
                    item.properties.unshift({id:null,name:"全部"})
                })
                filterData.value = result
                filterLoading.value = false
            })
        }
    },{ immediate: true })
      
    // 组合筛选属性的参数  参考数据：{brandId:'',attrs:[{groupName:'',propertyName:''},...]}
    // 获取筛选参数的函数
    const getFilterParams=()=>{
       const obj = { brandId: null, attrs: [] }
       //  品牌
       obj.brandId = filterData.value.selectedBrand

      //  其他筛选属性
     filterData.value.saleProperties.forEach(item=>{
       if(item.selectedProp){
         const p =item.properties.find(prop=>prop.id===item.selectedProp)
         obj.attrs.push({groupName:item.name,propertyName:p.name})
       }
     })

       if (obj.attrs.length === 0) obj.attrs = null
      return obj

    }
    // 记录当前选择品牌
    const changeBrand =(brandId)=>{
      if(filterData.value.selectedBrand === brandId) return
      filterData.value.selectedBrand = brandId
      //通知父组件取法请求那最新的数据
       emit('filter-change', getFilterParams())
    }
    // 记录当前选择的的销售属性
    const changeProp =(item,propId)=>{
      if(item.selectedProp===propId) return
      item.selectedProp=propId
      //通知父组件取法请求那最新的数据
       emit('filter-change', getFilterParams())

    }
    return {filterData,filterLoading,changeBrand,changeProp}
    }
}
</script>

<style lang="less" scoped>
@import '~@/assets/styles/variables.less';
 .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;  
          // white-space: nowrap;
          // text-overflow: ellipsis;
          // overflow: hidden;
          // max-width: 100px;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
  .xtx-skeleton {
  padding: 10px 0;
  }
</style>